<!-- workDetail -->
<template>
  <div class="workContain">
    <div class="workDetail">
      <div class="workTitle">
        <div class="workBacground">
          <div v-for="(img, index) in images" :key="index">
            <img :src="img" alt="公司LOGO" />
          </div>
        </div>
        <img :src="avatar" alt="发布者logo" class="publisherLogo" />
        <div class="workTitleDetails">
          <div class="workName">{{ title }}</div>
          <div class="workPublisher">{{ username }}</div>
          <div class="workAddress">{{ province }} {{ city }} {{ street }}</div>
          <textHover text="申请" @click.native="$router.push('/webSocket')" />
          <textHover text="收藏" />
        </div>
      </div>
      <div>
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
          stretch="stretch"
        >
          <el-tab-pane label="首页" name="first">
            <div class="wordIntroduce">
              <h1>职位简介</h1>
              {{ description }}
            </div>
            <div class="wordQualifications">
              <h1>职位要求</h1>
              {{ summary }}
              <h1>薪酬范围</h1>
              {{ salary }}
            </div>
          </el-tab-pane>
          <el-tab-pane label="关于" name="second">配置管理</el-tab-pane>
          <el-tab-pane label="动态" name="third">角色管理</el-tab-pane>
          <el-tab-pane label="职位" name="fourth">定时任务补偿</el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="workRecommend">
      <h2>看过本页的会员还看了</h2>
      <div class="workRecommendCard">HUAWEI</div>
      <div class="workRecommendCard">Smartisan</div>
      <div class="workRecommendCard">Apple</div>
    </div>
  </div>
</template>

<script>
import { workDetail } from "@/api/workSpalce";
import textHover from "@/components/textHover/textHover";

export default {
  name: "workDetail",
  components: { textHover },
  data() {
    return {
      activeName: "first",
      stretch: true,
      username: "",
      title: "",
      province: "",
      city: "",
      street: "",
      summary: "",
      description: "",
      tags: [],
      salary: "",
      images: [
        
      ],
      coordinate: "",
      publisherId: "",
      avatar: "",
    };
  },
  created() {
    workDetail(this.$route.query.workId)
      .then((result) => {
        this.username = result.data.publisher.username;
        this.title = result.data.title;
        this.province = result.data.province;
        this.city = result.data.city;
        this.street = result.data.street;
        this.summary = result.data.summary;
        this.tags = result.data.tags;
        this.coordinate = result.data.coordinate;
        this.publisherId = result.data.publisher.id;
        this.avatar = result.data.publisher.avatar;
        this.description = result.data.description;
        this.salary = result.data.salary;
        this.images = result.data.images
        localStorage.setItem('webScoket',this.publisherId)
      })
      .catch((err) => {});
  },
  mounted() {},
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style lang='scss' scoped>
.link--mallki {
  font-weight: 800;
  color: rgb(64, 158, 255);
  font-family: "Dosis", sans-serif;
  -webkit-transition: color 0.5s 0.25s;
  transition: color 0.5s 0.25s;
  overflow: hidden;
  position: relative;
  display: inline-block;
  line-height: 1;
  outline: none;
  text-decoration: none;
}
.workContain {
  display: flex;
  .workDetail {
    flex: 7;
    h1 {
      font-size: 22px;
      font-weight: 600;
      line-height: 50px;
      color: #191919;
    }
    .workTitle {
      width: 100%;
      background: white;
      position: relative;
      // box-shadow: 0 0 0 1px rgb(150 131 131 / 15%),
      //   0 2px 3px rgb(129 121 121 / 20%);
      border-radius: 10px 10px 0 0;
      overflow: hidden;
      .publisherLogo {
        position: absolute;
        top: 120px;
        left: 30px;
        height: 150px;
        border-radius: 10px;
        box-shadow: 0 0 0 2px rgb(150 131 131 / 15%),
          0 2px 3px 4px rgb(129 121 121 / 20%);
      }
      .workTitleDetails {
        padding: 30px;
        margin-top: 70px;
      }
    }
    .workBacground {
      width: 100%;

      display: flex;
      > div {
        width: 100%;
      }
      //无论有几张图片都填充
      img {
        width: 100%;
        height: 200px;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: center center;
        object-position: center center;
      }
    }
    .wordIntroduce,
    .wordQualifications {
      padding: 30px;
      background: white;
      box-shadow: 0 0 0 1px rgb(150 131 131 / 15%),
        0 2px 3px rgb(129 121 121 / 20%);
      border-radius: 10px;
    }
    .wordQualifications {
      margin-top: 10px;
    }
  }
  .workRecommend {
    flex: 3;
    margin-left: 20px;
    background: white;
    box-shadow: 0 0 0 1px rgb(150 131 131 / 15%),
      0 2px 3px rgb(129 121 121 / 20%);
    border-radius: 10px;
  }
}
.workContain ::v-deep {
  .el-tabs {
    background: #f3f2ef;
  }
  .el-tabs__header {
    background: white;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    border-top: 1px solid #ebebeb;
  }
  .el-tabs__nav-wrap {
    width: 50%;
  }
  .el-tabs__content {
    // background: white;
    // box-shadow: 0 0 0 1px rgb(150 131 131 / 15%),
    //   0 2px 3px rgb(129 121 121 / 20%);
    // border-radius: 10px;
    // padding: 10px 0;
  }
  .el-tabs__item {
    font-weight: 700;
    font-size: 18px;
    height: 55px;
    line-height: 55px;
    color: rgb(102, 102, 102);
  }
  .el-tabs__item.is-active {
    color: rgb(64, 158, 255);
  }
}
</style>